<template>
    <div id="squareLightbox">
        <div class="title">
            <li v-for="(i, index) in header" :key="index">
                {{ i }}
            </li>
        </div>
        <div
            v-show="speedlist"
            id="squarebox"
            ref="squarebox"
            :class="{ anim: animate == true }"
            @mouseenter="mEnter"
            @mouseleave="mLeave"
        >
            <li v-for="(item, index) in speedlist" :key="index">
                <p>
                    {{ item.locationName }}
                </p>
                <p>
                    {{ item.num }}
                </p>
                <p>{{ item.collectSpeed }} 人 / 1分钟</p>
            </li>
        </div>
        <div
            v-show="planlist"
            id="planlistbox"
            ref="planlistbox"
            :class="{ anim: animate == true }"
            @mouseenter="mEnter"
            @mouseleave="mLeave"
        >
            <li v-for="(item, index) in planlist" :key="index">
                <p>
                    {{ item.locationName }}
                </p>
                <p>
                    {{ item.appointmentNum }}
                </p>
                <p>
                    {{ item.endTime }}
                </p>
            </li>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        header: {
            type: Array,
            default: () => []
        },
        speedlist: {
            type: Array,
            default: () => []
        },
        planlist: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            animate: false
        };
    },
    mounted() {
        this.squaretime = setInterval(this.scroll, 1500);
        this.squaretimetwo = setInterval(this.scrolltwo, 1500);
    },
    methods: {
        scroll() {
            var that = this;
            if (that.speedlist.length > 10) {
                that.$refs.squarebox.style.marginTop = "-30px";
                that.animate = !that.animate;
            }
            setTimeout(function () {
                that.speedlist.push(that.speedlist[0]);
                that.speedlist.shift();
                if (that.speedlist.length > 10) {
                    that.$refs.squarebox.style.marginTop = "0px";
                    that.animate = !that.animate;
                }
            }, 500);
        },
        scrolltwo() {
            var that = this;
            if (that.planlist.length > 10) {
                that.$refs.planlistbox.style.marginTop = "-30px";
                that.animate = !that.animate;
            }
            setTimeout(function () {
                that.planlist.push(that.planlist[0]);
                that.planlist.shift();
                if (that.planlist.length > 10) {
                    that.$refs.planlistbox.style.marginTop = "0px";
                    that.animate = !that.animate;
                }
            }, 500);
        },
        mEnter() {
            clearInterval(this.squaretime);
            clearInterval(this.squaretimetwo);
        },
        mLeave() {
            this.squaretime = setInterval(this.scroll, 1500);
            this.squaretimetwo = setInterval(this.scrolltwo, 1500);
        }
    }
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

#squareLightbox {
    width: 100%;
    height: 360px;
    line-height: 30px;
    overflow: hidden;
    transition: all 0.5s;
    border-bottom: 1px dashed #163ea6;
}
.title {
    width: 100%;
    height: 30px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    position: relative;
    z-index: 9999;
    background: #163ea6;
}
.title li {
    width: 33%;
    text-align: center;
}
.anim {
    transition: all 0.5s;
}
#squarebox {
    width: 100%;
    z-index: 99;
}
#squarebox li {
    width: 100%;
    list-style: none;
    line-height: 30px;
    height: 30px;
    z-index: 1;
    display: flex;
    border-bottom: 1px dashed #163ea6;
}
#squarebox li p {
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}
#squarebox li p:nth-child(1) {
    width: 38%;
}
#squarebox li p:nth-child(2) {
    width: 30%;
}
#squarebox li p:nth-child(3) {
    width: 33%;
}

#planlistbox {
    width: 100%;
    z-index: 99;
}
#planlistbox li {
    width: 100%;
    list-style: none;
    line-height: 30px;
    height: 30px;
    z-index: 1;
    display: flex;
    border-bottom: 1px dashed #163ea6;
}
#planlistbox li p {
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}
#planlistbox li p:nth-child(1) {
    width: 38%;
}
#planlistbox li p:nth-child(2) {
    width: 30%;
}
#planlistbox li p:nth-child(3) {
    width: 33%;
}
</style>
